<template>
  <div class="home newHome">
    <div class="width-1920 advertising">
      <vue-seamless-scroll class="warp" :data="noticeData" :class-option="classOption">
        <ul class="item">
          <li v-for="(item, index) in noticeData" :key="index">
            <span class="title">{{ item.name }}</span>
            <span class="date"> {{ item.amount }}</span>
            <span class="ratio" :class="item.isNegative ? 'green' : 'red'">
              <i v-if="item.isNegative">↓</i><i v-else>↑</i>{{ item.value }}
            </span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
    <div class="width-1920 newHeader">
      <img src="../assets/image/logo.png" class="logo">
      <div class="searchBox">
        <input type="text" v-model="searchValue" @input="searchInput($event)" @keyup.enter="search_button">
        <img src="../assets/image/newArrow.png">
      </div>
      <img src="../assets/image/newSearchBtn.png" class="searchIcon" @click="search_button" style="display: block;height: 32px;">
      <!-- <span class="icon font_family icon-a-zu92" @click="search_button"></span> -->
      <div class="language">
        <!-- <span>中文</span>
        <span class="line">|</span>
        <span>English</span>
        <span class="line">|</span> -->
        <span @click="jump('https://www.shujuquan.com/')">旧版</span>
      </div>
      <span class="icon font_family icon-a-lujing1318" v-if="!islogin" @click="login"></span>
      <el-dropdown v-else @command="handleCommand">
        <div>
          欢迎：{{ userInfo.nickname }}
        </div>
        <el-dropdown-menu slot="dropdown" style="background-color: #25262E;border-color: #25262E">
          <el-dropdown-item class="user-dorp-item" command="logout">安全退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="menuBg">
      <div class="width-1920 menuCont">
        <div class="menuItem" v-for="(item, index) in newMenuDatas" :key="index">
          <span class="icon font_family" :class="item.icon"></span>
          <span class="name">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="width-1920 newContainer">
      <div class="left">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="(item, i) in chartsList1" :key="i">
            <div class="title">{{ item.title }}</div>
            <div :id="item.name" class="chart"></div>
            <img v-if="item.title === '经济学家信心指数'" class="qubg" src="@/assets/image/home/bg.png" alt="">
          </swiper-slide>
        </swiper>
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="(item, i) in chartsList2" :key="i">
            <div class="title">{{ item.title }}</div>
            <div :id="item.name" class="chart"></div>
          </swiper-slide>
        </swiper>
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="(item, i) in chartsList3" :key="i">
            <div class="title">{{ item.title }}</div>
            <div :id="item.name" class="chart"></div>
          </swiper-slide>
        </swiper>
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="(item, i) in chartsList4" :key="i">
            <div class="title">{{ item.title }}</div>
            <div :id="item.name" class="chart"></div>
            <div v-if="item.title === '知识产权'" class="AnnularData">
              <div class="annularItem" v-for="(item, index) in AnnularData" :key="index">
                <span class="name"><i></i> {{ item.name }}</span>
                <span class="num" v-if="index == 0">{{ item.data }}万家</span>
                <span class="num" v-else>{{ item.data }}万个</span>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="right" style="color: #fff;">
        <div class="rightCont" v-for="(item, index) in newContainerList" :key="index">
          <div class="rightItems" v-for="(item1, index1) in item" :key="item.id">
            <div class="titleBox" :class="islogin && !item1.route ? 'disable' : ''">
              <span class="icon font_family" :class="coverIcon(item1.name)"></span>
              <span class="title">{{ item1.name }}</span>
              <span class="icon font_family icon-menu"></span>
            </div>
            <div class="itemsCont" v-for="(item2, index2) in item1.children" :key="index2" @click="gomenus(item2)"
              :class="islogin && !item2.route ? 'disable' : ''">
              <span class="name">{{ item2.name }}</span>
              <span class="icon font_family" :class="coverIcon(item1.name)" v-if="item1.name !== '热门专题'"></span>
              <span class="hotIcon" v-else>HOT</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="width-1920 newFooter">
      <div class="newFooterCont newFooterRight">
        <p class="title">联系我们</p>
        <div class="cont">
          <div class="item" v-for="(item, index) in ContactUsList" :key="index">{{ item.name }} {{ item.phone }}</div>
        </div>
      </div>
      <div class="newFooterCont newFooterCenter">
        <p class="title">统计知识</p>
        <div class="cont contSpan" style="border: none;">
          <span class="item itemSpan" v-for="(item, index) in knowledgelist" :key="index">{{ item.name
            }}<em>|</em></span>
        </div>
      </div>

      <img src="../assets/image/logo.png" class="logo">
    </div>
    <home-foot class="width-1920"></home-foot>
    <login-window v-if="loginShow" :closeWindow="closeWindow"></login-window>
  </div>

</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import homeFoot from '../components/homefoot'
import 'swiper/dist/css/swiper.css'
import world from '@/assets/json/world.json'
import webNav from '@/components/webnav'
import VueScrollTo from 'vue-scrollto';
import LoginWindow from '@/page/login'

export default {
  data() {
    return {
      loginShow: false,
      quarter: '',
      menuDatas: [],
      menuRegionDatas: [],
      searchValue: '',
      newMenuDatas: [
        {
          name: '热门专题',
          icon: 'icon-a-lujing1682'
        },
        {
          name: '社会民生',
          icon: 'icon-a-lujing1679'
        },
        {
          name: '宏观经济',
          icon: 'icon-a-lujing1676'
        },
        {
          name: '产品价格',
          icon: 'icon-a-lujing1680'
        },
        {
          name: '金融数据',
          icon: 'icon-a-lujing1698'
        },
        {
          name: '行业经济',
          icon: 'icon-a-lujing1677'
        },
        {
          name: '对外贸易',
          icon: 'icon-a-lujing1678'
        },
        {
          name: '区域经济',
          icon: 'icon-a-lujing1674'
        },
        {
          name: '城市经济',
          icon: 'icon-a-lujing1696'
        },
        {
          name: '县域经济',
          icon: 'icon-a-lujing1697'
        },
        {
          name: '乡镇经济',
          icon: 'icon-a-lujing1681'
        },
        {
          name: '世界经济',
          icon: 'icon-a-lujing1675'
        },
        {
          name: '企业数据',
          icon: 'icon-a-lujing1673'
        }
      ],
      newContainerList: [],
      swiperOptions: {
        autoplay: {
          delay: 1000 * 60
        },
        loop: false,
      },
      //relation、heat、quarterBar、quarter、nation、province、county、yield、finance、continent、price、Mdindustry、world、Retirement
      chartsList1: [
        {
          name: 'quarter',
          title: '经济学家信心指数'
        },
        {
          name: 'price',
          title: ' 部分油类价格(单位:美元/吨)'
        }
      ],
      chartsList2: [
        {
          name: 'continent',
          title: ' 中国对各大洲进出口总额(单位:千美元   时间: 2023年)'
        },
        {
          name: 'finance',
          title: '工业财务情况(单位:亿元  时间:2024年09月)'
        }
      ],
      chartsList3: [
        {
          name: 'nation',
          title: '全国省市县GDP(单位;亿元  时间:2023年)'
        },
        {
          name: 'world',
          title: '一带一路国家GDP(单位:亿美元   时间: 2022年)'
        }
      ],
      chartsList4: [
        {
          name: 'relation',
          title: '公司族谱'
        },
        {
          name: 'Annular',
          title: '知识产权'
        }
      ],

      showMenu: false,
      world: world,
      nationTime: '',
      SubjectTime: '',
      MdindustryTime: '',
      exportsTime: '',
      industryTime: '',
      countyshow: false,
      classOption: {
        limitMoveNum: 2,
        direction: 2,
        hoverStop: false
      },
      color: ['#78C3A0', '#F7D532', '#3BB2EC', '#FF8959'],
      color2: ['120,195,160,0.36', '247,212,50,0.36', '59,178,236,0.36', '255,137,89,0.36'],
      swiperOption: {
        effect: 'fade',
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true
        }
      },
      exportsunit: '',
      quarter: '',
      noticeData: [],
      bannerData: [],
      menuData: [],
      linkList: [],
      industryLink: [],
      Macrolink: [],
      exportsLink: [],
      commodityList: [],
      Pricelink: [],
      Mdindustrylink: [],
      subjectlink: [],
      knowledgelist: [],
      Expectationlist: [],
      ContactUsList: [
        {
          name: '刘老师',
          phone: '188 1030 8405'
        },
        {
          name: '李老师',
          phone: '188 1030 8406'
        }
      ],
      reginLink: [],
      nationmap: { regionCode: '130000', name: '河北省' },
      countymap: { regionCode: '130100', name: '石家庄市' },
      AnnularData: [],
      islogin: false,
      userInfo: {},
    }
  },
  watch: {
    searchValue(newVal, oldVal) {
      this.setSearchValue(newVal)
    }
  },
  created() {
  },
  components: {
    homeFoot,
    webNav,
    swiper,
    swiperSlide,
    vueSeamlessScroll,
    LoginWindow
  },
  mounted() {
    console.log(this.getUserInfo, 'getUserInfo')
    this.userInfo = this.getUserInfo
    localStorage.getItem('TOKEN_KEY') ? this.islogin = true : this.islogin = false
    this.goinit()
    this.getNotice()
    this.getMenu()
    //echarts
    this.getrelation()
    this.getMacro()
    this.getregion()
    this.getindustry()
    this.getExports()
    this.getPrice()
    this.getSubject()
    this.getAnnular()
    // this.getRegionMenu()
    this.getExpectation()

    // this.getNotice()
    let searchValue = this.getSearchValue
    if (searchValue) {
      this.searchValue = searchValue
    }
  },
  computed: {
    ...mapGetters({
      getUserInfo: 'getUserInfo',
      getSearchValue: 'getSearchValue',
    }),
  },
  methods: {
    ...mapMutations(['setBreadcrumb', 'setSearchValue', 'setHeadTag', 'getUserInfo']),
    login() {
      this.loginShow = true
    },
    handleCommand(command) {
      this[command]()
    },
    logout() {
      console.log('logout')
      localStorage.clear()
      window.location.reload()
    },
    jump(url) {
      window.location.href = url
    },
    closeWindow() {
      console.log('close')
      this.loginShow = false
      window.location.reload()
      // this.getMenu()
    },
    // 公司数据
    getAnnular() {
      var myChart = this.$echarts.init(document.getElementById("Annular"));
      myChart.showLoading();
      let self = this
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '24'
        },
      }).then(function (response) {
        // const AnnularData = response.data.data1
        const AnnularData = [
          { name: '公司数', data: 5000 },
          { name: '专利数', data: 4492 },
          { name: '商标数', data: 7429 },
          { name: '软著数', data: 1066 }]
        self.AnnularData = AnnularData
        self.linkList = response.data.data2
        var chartOption = {
          color: ['#78C3A0', '#D4BB41', '#3DA6D9', '#E79F82'],
          polar: {
            radius: [30, '80%']
          },
          angleAxis: {
            startAngle: 90
          },
          radiusAxis: {
            type: 'category',
          },
          textStyle: {
            color: '#fff'
          },
          tooltip: {
            trigger: "item",
            formatter: '{a}<br />{c}万'
          },
          series: AnnularData.map((item) => {
            return {
              name: item.name,
              type: 'bar',
              data: [item.data],
              roundCap: false,
              coordinateSystem: 'polar'
            }
          })
        };
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
      }).catch(function (error) {
        console.error(error)
      });
    },
    getNotice() {
      let self = this
      this.$axios2.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '21'
        },
      }).then(function (response) {
        self.noticeData = self.formatNotice(response.data)
      }).catch(function (error) {
        console.error(error)
      });
    },
    getExpectation() {
      let self = this
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '33'
        },
      }).then(function (response) {
        self.Expectationlist = response.data.data1
      })
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '34'
        },
      }).then(function (response) {
        self.knowledgelist = response.data.data1
      })
    },
    // 专题数据
    getSubject() {
      var self = this
      this.$axios2.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '32'
        },
      }).then(function (response) {
        self.getworldmap(response.data.data3)
      })
    },

    getworldmap(data) {
      var planePath =
        'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
      var myChart = this.$echarts.init(document.getElementById("world"));
      this.$echarts.registerMap('world', world)
      var allData = {
        citys: data,
        moveLines: []
      }
      var cityMap = {
        "Afghanistan": "阿富汗",
        "Singapore": "新加坡",
        "Angola": "安哥拉",
        "Albania": "阿尔巴尼亚",
        "United Arab Emirates": "阿拉伯联合酋长国",
        "Argentina": "阿根廷",
        "Armenia": "亚美尼亚",
        "French Southern and Antarctic Lands": "法属南半球和南极领地",
        "Australia": "澳大利亚",
        "Austria": "奥地利",
        "Azerbaijan": "阿塞拜疆",
        "Burundi": "布隆迪",
        "Belgium": "比利时",
        "Benin": "贝宁",
        "Burkina Faso": "布基纳法索",
        "Bangladesh": "孟加拉",
        "Bulgaria": "保加利亚",
        "Bahamas": "巴哈马",
        "Bosnia and Herz.": "波黑",
        "Belarus": "白俄罗斯",
        "Belize": "伯利兹",
        "Bermuda": "百慕大",
        "Bolivia": "玻利维亚",
        "Brazil": "巴西",
        "Brunei": "文莱",
        "Bhutan": "不丹",
        "Botswana": "博茨瓦纳",
        "Central African Rep.": "中非",
        "Canada": "加拿大",
        "Switzerland": "瑞士",
        "Chile": "智利",
        "China": "中国",
        "Côte d'Ivoire": "科特迪瓦",
        "Cameroon": "喀麦隆",
        "Dem. Rep. Congo": "刚果（金）",
        "Congo": "刚果",
        "Colombia": "哥伦比亚",
        "Costa Rica": "哥斯达黎加",
        "Cuba": "古巴",
        "Northern Cyprus": "北塞浦路斯",
        "Cyprus": "塞浦路斯",
        "Czech Rep.": "捷克",
        "Germany": "德国",
        "Djibouti": "吉布提",
        "Denmark": "丹麦",
        "Algeria": "阿尔及利亚",
        "Ecuador": "厄瓜多尔",
        "Egypt": "埃及",
        "Eritrea": "厄立特里亚",
        "Spain": "西班牙",
        "Estonia": "爱沙尼亚",
        "Ethiopia": "埃塞俄比亚",
        "Finland": "芬兰",
        "Fiji": "斐济",
        "Falkland Is.": "福克兰群岛",
        "France": "法国",
        "Gabon": "加蓬",
        "United Kingdom": "英国",
        "Georgia": "格鲁吉亚",
        "Ghana": "加纳",
        "Gambia": "冈比亚",
        "Guinea": "几内亚",
        "Guinea-Bissau": "几内亚比绍",
        "Eq. Guinea": "赤道几内亚",
        "Greece": "希腊",
        "Greenland": "格陵兰",
        "Guatemala": "危地马拉",
        "Fr. S. Antarctic Lands": "留尼汪",
        "Guyana": "圭亚那",
        "Honduras": "洪都拉斯",
        "Croatia": "克罗地亚",
        "Haiti": "海地",
        "Hungary": "匈牙利",
        "Indonesia": "印度尼西亚",
        "India": "印度",
        "Ireland": "爱尔兰",
        "Iran": "伊朗",
        "Iraq": "伊拉克",
        "Iceland": "冰岛",
        "Israel": "以色列",
        "Italy": "意大利",
        "Jamaica": "牙买加",
        "Jordan": "约旦",
        "Japan": "日本本土",
        "Kazakhstan": "哈萨克斯坦",
        "Kenya": "肯尼亚",
        "Kyrgyzstan": "吉尔吉斯斯坦",
        "Cambodia": "柬埔寨",
        "Korea": "韩国",
        "Dem. Rep. Korea": "北朝鲜",
        "Kosovo": "科索沃",
        "Kuwait": "科威特",
        "Lao PDR": "老挝",
        "Lebanon": "黎巴嫩",
        "Liberia": "利比里亚",
        "Libya": "利比亚",
        "Sri Lanka": "斯里兰卡",
        "Lesotho": "莱索托",
        "Lithuania": "立陶宛",
        "Luxembourg": "卢森堡",
        "Latvia": "拉脱维亚",
        "Morocco": "摩洛哥",
        "Moldova": "摩尔多瓦",
        "Madagascar": "马达加斯加",
        "Mexico": "墨西哥",
        "Macedonia": "北马其顿",
        "Mali": "马里",
        "Myanmar": "缅甸",
        "Montenegro": "黑山",
        "Mongolia": "蒙古",
        "Mozambique": "莫桑比克",
        "Mauritania": "毛里塔尼亚",
        "Malawi": "马拉维",
        "Malaysia": "马来西亚",
        "Namibia": "纳米比亚",
        "New Caledonia": "新喀里多尼亚",
        "Niger": "尼日尔",
        "Nigeria": "尼日利亚",
        "Nicaragua": "尼加拉瓜",
        "Netherlands": "荷兰",
        "Norway": "挪威",
        "Nepal": "尼泊尔",
        "New Zealand": "新西兰",
        "Oman": "阿曼",
        "Pakistan": "巴基斯坦",
        "Panama": "巴拿马",
        "Peru": "秘鲁",
        "Philippines": "菲律宾",
        "Papua New Guinea": "巴布亚新几内亚",
        "Poland": "波兰",
        "Puerto Rico": "波多黎各",
        "Portugal": "葡萄牙",
        "Paraguay": "巴拉圭",
        "Qatar": "卡塔尔",
        "Romania": "罗马尼亚",
        "Russia": "俄罗斯",
        "Rwanda": "卢旺达",
        "W. Sahara": "西撒哈拉",
        "Saudi Arabia": "沙特阿拉伯",
        "Sudan": "苏丹",
        "S. Sudan": "南苏丹",
        "Senegal": "塞内加尔",
        "Solomon Is.": "所罗门群岛",
        "Sierra Leone": "塞拉利昂",
        "El Salvador": "萨尔瓦多",
        "Somaliland": "索马里兰",
        "Somalia": "索马里",
        "Serbia": "塞尔维亚",
        "Suriname": "苏里南",
        "Slovakia": "斯洛伐克",
        "Slovenia": "斯洛文尼亚",
        "Sweden": "瑞典",
        "Swaziland": "斯威士兰",
        "Syria": "叙利亚",
        "Chad": "乍得",
        "Togo": "多哥",
        "Thailand": "泰国",
        "Tajikistan": "塔吉克斯坦",
        "Turkmenistan": "土库曼斯坦",
        "Timor-Leste": "东帝汶",
        "Trinidad and Tobago": "特立尼达和多巴哥",
        "Tunisia": "突尼斯",
        "Turkey": "土耳其",
        "Tanzania": "坦桑尼亚",
        "Uganda": "乌干达",
        "Ukraine": "乌克兰",
        "Uruguay": "乌拉圭",
        "United States": "美国",
        "Uzbekistan": "乌兹别克斯坦",
        "Venezuela": "委内瑞拉",
        "Vietnam": "越南",
        "Vanuatu": "瓦努阿图",
        "West Bank": "西岸",
        "Yemen": "也门",
        "South Africa": "南非",
        "Zambia": "赞比亚",
        "Zimbabwe": "津巴布韦",
        "Aland": "奥兰群岛",
        "American Samoa": "美属萨摩亚",
        "Andorra": "安道尔",
        "Anguilla": "安圭拉",
        "Antigua and Barb.": "安提瓜和巴布达",
        "Aruba": "阿鲁巴",
        "Bahrain": "巴林",
        "Barbados": "巴巴多斯",
        "Bouvet Island": "布维岛",
        "Cape Verde": "佛得角",
        "Christmas Islands": "圣诞岛",
        "Cocos (keeling) Islands": "科科斯（基林）群岛",
        "Comoros": "科摩罗",
        "Cook Islands": "库克群岛",
        "Dominica": "多米尼克",
        "Dominican Rep.": "多明尼加共和国",
        "Faeroe Is.": "法罗群岛",
        "MetropolitanFrance": "法国大都会",
        "French Polynesia": "法属波利尼西亚",
        "Gibraltar": "直布罗陀",
        "Grenada": "格林纳达",
        "Guam": "关岛",
        "Guernsey": "根西岛",
        "Isle of Man": "马恩岛",
        "Jersey": "泽西岛",
        "Kiribati": "基里巴斯",
        "Liechtenstein": "列支敦士登公国",
        "Maldives": "马尔代夫",
        "Malta": "马耳他",
        "Marshall Islands": "马绍尔群岛",
        "Mauritius": "毛里求斯",
        "Micronesia": "密克罗尼西亚",
        "Monaco": "摩纳哥",
        "Montserrat": "蒙特塞拉特",
        "Nauru": "瑙鲁",
        "Niue": "纽埃",
        "Norfolk Island": "诺福克岛",
        "Palau": "帕劳",
        "Palestine": "巴勒斯坦",
        "Pitcairn Islands": "皮特凯恩群岛",
        "Russian Federation": "俄罗斯联邦",
        "Saint Helena": "圣赫勒拿",
        "Saint Lucia": "圣卢西亚",
        "Saint Kitts-Nevis": "圣基茨和尼维斯",
        "St. Vin. and Gren.": "圣文森特和格林纳丁斯",
        "Samoa": "萨摩亚",
        "San Marino": "圣马力诺",
        "Sao Tome and Principe": "圣多美和普林西比",
        "Seychelles": "塞舌尔",
        "Tokelau": "托克劳",
        "Tonga": "汤加",
        "Tuvalu": "图瓦卢",
        "Vatican City": "梵蒂冈",
        "Wallis and Futuna": "瓦利斯群岛和富图纳群岛",
        "Yugoslavia": "南斯拉夫"
      }
      data.map(item => (
        allData.moveLines.push({
          fromName: '中国',
          toName: item.name,
          coords: [[116.416718, 39.912934], [item.value[0], item.value[1]]]
        })
      ))
      var cityData = [{ name: '中国', value: [116.416718, 39.912934, 10] }]
      var chartOption = {
        tooltip: {
          // show: false,
          formatter: function (params) {
            if (params.data) {
              return params.data.name + " : " + params.data.value[2]
            } else {
              return cityMap[params.name]
            }
          }
        },
        grid: {
          right: '8%',
        },
        geo: {
          map: 'world',
          aspectScale: 0.65, //长宽比
          zoom: 1.12,
          tooltip: {
            // show: !1,
            formatter: function (params) {
              if (params.data) return params.data.name + " : " + params.data.value[2]
            }
          },
          nameMap: cityMap,
          scaleLimit: {
            min: 1,
            max: 5,
          },
          label: {
            show: !1,
          },
          roam: false,
          itemStyle: {
            color: 'rgba(0,116,177, .6)',
            borderColor: 'rgb(79,228,255)',
            borderWidth: 1,
            normal: {
              shadowColor: "#164A7C",
              shadowOffsetX: 5,
              shadowOffsetY: 5,
            },
          },
          emphasis: {
            itemStyle: {
              areaColor: 'rgba(0,162,248, .6)',
            },
          }
        },
        series: [{
          type: "map",
          roam: false,
          label: {
            show: !1,
          },
          itemStyle: {
            normal: {
              borderColor: "#3EC3E3",
              borderWidth: 0.2,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1867B5", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#1867B5", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
            },
            emphasis: {
              label: {
                // show: !1,
                color: "#fff",
              },
              areaColor: "#0E83B7",
              borderWidth: 0.2,
            },
          },
          aspectScale: 0.65, //长宽比
          zoom: 1.12,
          map: "world", //使用
        },
        {
          name: '地点',
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 1,
            brushType: "stroke",
            scale: 8
          },
          label: {
            normal: {
              show: true,
              position: "right",
              color: "#9966cc",
              formatter: "{b}",
              textStyle: {
                color: "#fff"
              }
            },
            emphasis: {
              show: true
            }
          },
          symbol: "pin",
          symbolSize: 20,
          itemStyle: {
            normal: {
              show: true,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#F65857", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#EC2624", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          data: cityData,
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          symbol: 'circle',
          symbolSize: 10,
          rippleEffect: {
            period: 4,
            scale: 4,
            brushType: 'stroke',
          },
          label: {
            normal: {
              show: false,
              position: "right",
              offset: [5, 0],
              formatter: "{b}",
              textStyle: {
                color: "rgb(214,206,143)",
              },
            },
          },
          emphasis: {
            show: true,
            scale: !0,
            label: {
              show: true,
              backgroundColor: "#000",
              padding: 2,
              borderRadius: 2,
              color: "#fff",
            },
          },
          symbol: "circle",
          symbolSize: "6",
          itemStyle: {
            normal: {
              show: false,
              color: "#0FD1D9",
            },
          },
          data: allData.citys,
        },
        {
          name: '线路',
          type: 'lines',
          coordinateSystem: 'geo',
          large: true,
          zlevel: 2,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15,
          },
          lineStyle: {
            normal: {
              color: "rgb(255,236,61)",
              width: 2,
              type: 'solid',
              curveness: 0.3,
            }
          },
          label: {
            normal: {
              show: false,
              position: 'middle',
              formatter: '{b}'
            }
          },
          data: allData.moveLines,
        },
        ],
      }
      myChart.setOption(chartOption, true);
    },
    // 价格数据
    getPrice() {
      var self = this
      var myChart = this.$echarts.init(document.getElementById("price"));
      myChart.showLoading();
      this.$axios2.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '30'
        },
      }).then(function (response) {
        console.log(response, 222)
        self.Pricelink = response.data.data2
        const processedData = Object.keys(response.data.data1).map((key) => {
          return {
            name: key,
            data: Object.entries(response.data.data1[key]).map(([date, price]) => {
              return { x: date, y: parseFloat(price) };
            })
          };
        });
        console.log(processedData[0].data.map(item => item.x), 333)

        const colors = ['rgba(212, 130, 101, 0.3)', 'rgba(194, 53, 49, 0.3)', 'rgba(97, 160, 168, 0.3)']

        var chartOption = {
          tooltip: {
            trigger: "item",
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal'
            }
          },
          color: ['#D48265', '#A33936', '#61A0A8'],
          legend: {
            align: 'left',
            right: '30px',
            type: 'plain',
            itemHeight: 8,
            textStyle: {
              color: '#D7D8DE',
              fontSize: 12,
            },
            lineStyle: {
              width: 1
            }
          },
          grid: {
            x: 15,
            x2: 10,
            y: 35,
            y2: 20,
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666',
                type: 'solid'
              },
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                padding: 16,
                fontSize: 14
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#192a44'
              },
            },
            data: processedData[0].data.map(item => item.x)
          },
          yAxis: {
            // name: `单位：${response.data.unit1}`,
            nameTextStyle: {
              color: '#ffffff'
            },
            min: 700,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#666',
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#233653"
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                padding: 16,
                fontSize: 12
              }
            }
          },
          series: processedData.map((item, index) => ({
            name: item.name,
            type: 'line',
            symbolSize: 6,
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
              },
              borderColor: 'rgba(0,0,0,.4)',
            },
            itemStyle: {
              borderColor: colors[index],
              borderWidth: 3,
              shadowColor: colors[index],
              shadowBlur: 14
            },
            areaStyle: {
              color: colors[index]
            },
            tooltip: {
              show: true
            },
            data: item.data.map((item) => item.y)
          }))
        }
        console.log(chartOption, 444)
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
      }).catch(function (error) {
        console.error(error)
      });
    },
    // 进出口数据
    getExports() {
      var self = this
      var myChart = this.$echarts.init(document.getElementById("continent"));
      myChart.showLoading();
      this.$axios2.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '29'
        },
      }).then(function (response) {
        self.exportsLink = response.data.data3
        self.commodityList = response.data.data2
        self.exportsunit = response.data.unit1
        self.exportsTime = response.data.time
        const processDataForRadarChart = (data) => {
          var radarData = []
          var categories = []
          var values = []
          var continentArray = [];
          for (var i = 0; i < data.length; i++) {
            var item = data[i]
            var key = Object.keys(item)[0]
            var subData = item[key]
            categories.push(key)
            var subValues = []
            for (var region in subData) {
              if (!continentArray.includes(region)) {
                continentArray.push(region);
              }
              subValues.push(parseFloat(subData[region]))
            }
            values.push(subValues);
          }
          radarData.push(categories)
          radarData.push(values)
          radarData.push(continentArray)
          return radarData
        }
        const [labels, values, regions] = processDataForRadarChart(response.data.data1);
        const indicator = regions.map((region) => ({
          name: region,
          max: null
        }))
        const colorlist = ['83, 147, 234', '245, 166, 35', '86,199,60']
        const seriesData = labels.map((items, index) => ({
          name: items,
          type: 'radar',
          symbol: "circle",
          symbolSize: 8,
          areaStyle: {
            normal: {
              color: `rgba(${colorlist[index]}, 0.5)`
            }
          },
          itemStyle: {
            color: `rgba(${colorlist[index]}, 0.2)`,
            borderColor: colorlist[index],
            // borderWidth: 10,
          },
          lineStyle: {
            normal: {
              type: "solid",
              color: `rgba(${colorlist[index]}, 1)`,
              width: 2
            }
          },
          data: [{ value: values[index], name: items }]
        }))
        var chartOption = {
          tooltip: {
            show: true,
            trigger: "item",
            valueFormatter: (value) => value
          },
          color: ['rgba(83, 147, 234, 1)', 'rgba(245, 166, 35, 1)', 'rgba(86,199,60, 1)'],
          legend: {
            show: true,
            icon: "circle",
            left: "35%",
            top: "90%",
            orient: "horizontal",
            textStyle: {
              fontSize: 14,
              color: "#fff"
            },
            data: regions
          },
          radar: {
            center: ["50%", "50%"],
            radius: "70%",
            "startAngle": 90,
            "splitNumber": 4,
            "shape": "circle",
            "splitArea": {
              "areaStyle": {
                "color": ["transparent"]
              }
            },
            axisLabel: {
              "show": false,
              "fontSize": 18,
              "color": "#fff",
              "fontStyle": "normal",
              "fontWeight": "normal"
            },
            axisName: {
              show: true,
              color: '#fff',
              fontSize: 14
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#666"
              }
            },
            splitLine: {
              "show": true,
              lineStyle: {
                color: "#666"
              }
            },
            indicator: indicator,
          },
          series: seriesData
        }
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
      }).catch(function (error) {
        console.error(error)
      });
    },
    // 工业经济
    getindustry() {
      var self = this
      this.$axios2.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '28'
        },
      }).then(function (response) {
        self.getfinance(response.data.data1)
      }).catch(function (error) {
        console.error(error)
      });
    },
    getfinance(data) {
      var myChart = this.$echarts.init(document.getElementById("finance"));
      myChart.showLoading();
      const processedData = data.map((item, index) => {
        return {
          name: Object.keys(item)[0],
          value: parseFloat(Object.values(item)[0])
        }
      })
      const look = [1400000, 1232000, 1064000, 896000, 728000, 560000, 392000, 224000]
      const endprocessedData = processedData.map((item, index) => {
        return {
          name: item.name,
          value: look[index]
        }
      })
      var chartOption = {
        color: ['#8856A0', '#DB754C', '#368E68', '#66A8C3', '#CF5B5D', '#4C64AF', '#80B26A', '#D9AE51'],
        series: [
          {
            type: 'funnel',
            name: '资产总计',
            top: '10%',
            left: '15%',
            width: '70%',
            height: '80%',
            label: {
              color: '#fff',
              position: 'inside',
              formatter: '{b} {c}',
              fontSize: 13,
              borderWidth: 0,
              borderColor: 'transparent',
              backgroundColor: 'transparent',
              emphasis: {
                show: false,
              }
            },
            data: processedData
          },
          {
            type: 'funnel',
            name: '预期',
            top: '10%',
            left: '10%',
            width: '80%',
            height: '80%',
            label: {
              normal: {
                show: false,
                formatter: '{b}',
                fontSize: 13,
                borderWidth: 0,
                borderColor: 'transparent',
                backgroundColor: 'transparent'
              },
              emphasis: {
                show: false,
                formatter: '{b}'
              }
            },
            itemStyle: {
              opacity: 0.5,
            },
            data: endprocessedData
          }
        ]
      }
      myChart.hideLoading();
      myChart.setOption(chartOption, true);
    },
    // 区域经济
    getregion() {
      var self = this
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '27'
        },
      }).then(function (response) {
        self.reginLink = response.data.data1
      })
      this.getnation()
    },
    // 获取全国地图数据
    getnation() {
      var self = this
      var timeFn = null;
      var myChart = this.$echarts.init(document.getElementById("nation"));
      this.$axios.request({
        url: "5700/home/getMapData",
        method: "get",
        params: {
          regionCode: 100000
        },
      }).then(function (response) {
        let mapjson = response.data.boundary
        let mapdata = response.data.data
        let maxData = response.data.maxData
        self.nationTime = response.data.time
        self.$echarts.registerMap('china', mapjson);
        var chartOption = {
          tooltip: {
            textStyle: {
              color: '#536BAE',
              fontWeight: 400,
              fontSize: 12
            },
            formatter: function (params) {
              return (`<div style="display: flex;flex-direction: column;"><span>${params.name}</span><span style="color: #020B15;font-size: 12px;">GDP: ${params.data.value[2]} 亿元</span></div>`);
            }
          },
          geo: {
            map: 'china',
            roam: false,
            layoutCenter: ["50%", "50%"],
            zoom: 1.3,
            itemStyle: {
              normal: {
                areaColor: '#97B8C7',
                shadowColor: '#9FCDF2',
                shadowOffsetX: 4,
                shadowOffsetY: 9
              },
            },
            regions: [{
              name: '南海诸岛',
              itemStyle: {
                areaColor: 'rgba(0, 10, 52, 1)',
                borderColor: 'rgba(0, 10, 52, 1)',
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: "#009cc9",
                  }
                }
              },
            }],
          },
          visualMap: {
            type: "continuous",
            text: ["", ""],
            showLabel: true,
            left: "-50",
            min: 1,
            max: maxData,
            inRange: {
              color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"],
            },
            splitNumber: 0,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          series: [
            {
              name: "MAP",
              type: "map",
              mapType: 'china',
              selectedMode: "false",
              zoom: 1.3,
              label: {
                normal: {
                  show: true,
                },
                emphasis: {
                  show: true,
                },
              },
              itemStyle: {
                borderColor: "#7B9EA8",
                borderWidth: 1,
              },
              data: mapdata
            }
          ]
        }
        myChart.setOption(chartOption, true);
      })
    },
    // 宏观经济
    getMacro() {
      let self = this
      this.$axios2.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '26'
        },
      }).then(function (response) {
        self.getQuarter(response.data.data1['经济学家信心指数'])
      }).catch(function (error) {
        console.error(error)
      });
    },
    getQuarter(data) {
      const entries = Object.entries(data);
      const [currentYear, quarters] = entries[0];
      const currentValue = quarters[Object.keys(quarters)[0]];
      var myChart = this.$echarts.init(document.getElementById("quarter"));
      myChart.showLoading();
      var self = this
      var chartOption = {
        series: [
          {
            type: 'gauge',
            radius: '100%',
            startAngle: 220,
            endAngle: -40,
            axisLine: {
              lineStyle: {
                color: [
                  [1, '#1B2B37'],
                ],
                width: 20
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            detail: {
              show: false,
              offsetCenter: [0, '60%'],
              textStyle: {
                fontSize: 32,
                color: '#fff'
              }
            },
          },
          {
            type: 'gauge',
            radius: '100%',
            startAngle: 220,
            endAngle: -45,
            min: 0,
            max: 100,
            axisLine: {
              show: true,
              lineStyle: {
                width: 20,
                color: [
                  [
                    currentValue / 100, new self.$echarts.graphic.LinearGradient(
                      0, 1, 1, 0, [{
                        offset: 0,
                        color: 'rgba(58, 70, 130, 1)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(63, 85, 170, 1)',
                      }
                    ]
                    )
                  ],
                  [
                    1, 'rgba(255,255,255,.0)'
                  ]
                ]
              }
            },
            axisTick: {
              show: 0,
            },
            splitLine: {
              show: 0,
            },
            axisLabel: {
              show: 0
            },
            pointer: {
              show: false,
            },
            detail: {
              show: true,
              offsetCenter: [0, 0],
              textStyle: {
                fontSize: 32,
                color: '#ffffff',
                fontWeight: 400,
                textBorderWidth: 10
              },
              formatter: function () {
                return currentValue;
              }
            },
            data: [{
              value: currentValue
            }]
          },
          {
            name: '最外刻度箭头',
            type: 'gauge',
            radius: '100%',
            center: ['50%', '50%'],
            startAngle: 175 - (260 * currentValue) / 100 + 41,
            endAngle: 175 - (260 * currentValue) / 100 - 40,
            splitNumber: 10,
            min: 0,
            max: 100,
            axisLine: {
              lineStyle: {
                color: [
                  [3 / 220, 'rgba(63, 85, 170, 1)'],
                ],
                width: 30,
                shadowColor: 'rgba(63, 85, 170, 1)',
                shadowBlur: 10,
              },
            },
            progress: {
              show: false,
              width: 29,
              itemStyle: {
                color: '#10EBE3',
                shadowColor: 'rgba(63, 85, 170, 1)',
                shadowBlur: 10,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
            animationDelay: 850,
            animationDuration: 300
          }
        ]
      }
      myChart.hideLoading();
      myChart.setOption(chartOption, true);
    },
    // 关系图数据
    getrelation() {
      var myChart = this.$echarts.init(document.getElementById("relation"));
      var graph = {
        "nodes": [
          {
            "id": "0",
            "name": "温州中油冶金加油站有限公司",
            "symbolSize": 19.12381,
            "x": -266.82776,
            "y": 299.6904,
            "value": 28.685715,
            "category": 0
          },
          {
            "id": "1",
            "name": "重庆石油天然气交易中心",
            "symbolSize": 2.6666666666666665,
            "x": -418.08344,
            "y": 446.8853,
            "value": 4,
            "category": 0
          },
          {
            "id": "2",
            "name": "石家庄绿能速电科技有限公司",
            "symbolSize": 6.323809333333333,
            "x": -212.76357,
            "y": 245.29176,
            "value": 9.485714,
            "category": 1
          },
          {
            "id": "3",
            "name": "上海爱使东方气站有限公司",
            "symbolSize": 6.323809333333333,
            "x": -242.82404,
            "y": 235.26283,
            "value": 9.485714,
            "category": 1
          },
          {
            "id": "4",
            "name": "华北油田新能源有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -379.30386,
            "y": 429.06424,
            "value": 4,
            "category": 0
          },
          {
            "id": "5",
            "name": "中山市中油同益加油站有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -417.26337,
            "y": 406.03506,
            "value": 4,
            "category": 0
          },
          {
            "id": "6",
            "name": "中石油克拉码依石化有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -332.6012,
            "y": 485.16974,
            "value": 4,
            "category": 0
          },
          {
            "id": "7",
            "name": "重庆石油天然气交易中心",
            "symbolSize": 2.6666666666666665,
            "x": -382.69568,
            "y": 475.09113,
            "value": 4,
            "category": 0
          },
          {
            "id": "8",
            "name": "厦门市杏林中油油品供应有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -320.384,
            "y": 387.17325,
            "value": 4,
            "category": 0
          },
          {
            "id": "9",
            "name": "重庆油山荣石油有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -344.39832,
            "y": 451.16772,
            "value": 4,
            "category": 0
          },
          {
            "id": "10",
            "name": "北京中油首路石油销售有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -89.34107,
            "y": 234.56128,
            "value": 4,
            "category": 1
          },
          {
            "id": "11",
            "name": "中国石油天然气股份有限公司",
            "symbolSize": 66.66666666666667,
            "x": -87.93029,
            "y": -6.8120565,
            "value": 100,
            "category": 1
          },
          {
            "id": "12",
            "name": "北京中油华电石油销售有限公司",
            "symbolSize": 4.495239333333333,
            "x": -339.77908,
            "y": -184.69139,
            "value": 6.742859,
            "category": 1
          },
          {
            "id": "13",
            "name": "乐山市川沐销能源有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -194.31313,
            "y": 178.55301,
            "value": 4,
            "category": 1
          },
          {
            "id": "14",
            "name": "中国供销石油有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -158.05168,
            "y": 201.99768,
            "value": 4,
            "category": 1
          },
          {
            "id": "15",
            "name": "重庆中油正南能源销售有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -127.701546,
            "y": 242.55057,
            "value": 4,
            "category": 1
          },
          {
            "id": "16",
            "name": "成都生物城中油能源有限公司",
            "symbolSize": 17.295237333333333,
            "x": -385.2226,
            "y": -393.5572,
            "value": 25.942856,
            "category": 2
          },
          {
            "id": "17",
            "name": "上海东新加油站有限公司",
            "symbolSize": 13.638097333333334,
            "x": -516.55884,
            "y": -393.98975,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "18",
            "name": "梅州市梅县区江灵中油油……",
            "symbolSize": 13.638097333333334,
            "x": -464.79382,
            "y": -493.57944,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "19",
            "name": "陕西氢能昆仑能源发展有限公司",
            "symbolSize": 13.638097333333334,
            "x": -515.1624,
            "y": -456.9891,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "20",
            "name": "中油曹妃甸石油销售有限公司",
            "symbolSize": 13.638097333333334,
            "x": -408.12122,
            "y": -464.5048,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "21",
            "name": "浙油(山东)新能源有限公司",
            "symbolSize": 13.638097333333334,
            "x": -456.44113,
            "y": -425.13303,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "22",
            "name": "河南中油视博科技有限责任公司",
            "symbolSize": 13.638097333333334,
            "x": -459.1107,
            "y": -362.5133,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "23",
            "name": "中油中船(北京)石油销...",
            "symbolSize": 28.266666666666666,
            "x": -313.42786,
            "y": -289.44803,
            "value": 42.4,
            "category": 2
          },
          {
            "id": "24",
            "name": "四川中运宝信息技术有限公司",
            "symbolSize": 20.95238266666667,
            "x": 4.6313396,
            "y": -273.8517,
            "value": 31.428574,
            "category": 7
          },
          {
            "id": "25",
            "name": "广东瑞斯拜德汽车服务有限公司",
            "symbolSize": 30.095235333333335,
            "x": 82.80825,
            "y": -203.1144,
            "value": 45.142853,
            "category": 7
          },
          {
            "id": "26",
            "name": "宁波中油凤岭加油站有限公司",
            "symbolSize": 20.95238266666667,
            "x": 78.64646,
            "y": -31.512747,
            "value": 31.428574,
            "category": 6
          },
          {
            "id": "27",
            "name": "扬州中油石油销售有限公司...",
            "symbolSize": 31.923806666666668,
            "x": -81.46074,
            "y": -204.20204,
            "value": 47.88571,
            "category": 7
          },
          {
            "id": "28",
            "name": "上饶市广丰区广隆石油有限公司",
            "symbolSize": 8.152382000000001,
            "x": -225.73984,
            "y": 82.41631,
            "value": 12.228573,
            "category": 4
          },
          {
            "id": "29",
            "name": "益阳团山商贸有限公司",
            "symbolSize": 15.466666666666667,
            "x": -385.6842,
            "y": -20.206686,
            "value": 23.2,
            "category": 3
          },
          {
            "id": "30",
            "name": "乐山峨沙天然气有限责任公司",
            "symbolSize": 4.495239333333333,
            "x": -403.92447,
            "y": -197.69823,
            "value": 6.742859,
            "category": 2
          },
          {
            "id": "31",
            "name": "宁夏中油能源科技有限责公司",
            "symbolSize": 8.152382000000001,
            "x": -281.4253,
            "y": -158.45137,
            "value": 12.228573,
            "category": 2
          },
          {
            "id": "32",
            "name": "广西铜州石油有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -122.41348,
            "y": 210.37503,
            "value": 4,
            "category": 1
          },
          {
            "id": "33",
            "name": "保定中油石油销售有限公司",
            "symbolSize": 4.495239333333333,
            "x": -234.6001,
            "y": -113.15067,
            "value": 6.742859,
            "category": 1
          },
          {
            "id": "34",
            "name": "上海中油临港石油有限公司",
            "symbolSize": 11.809524666666666,
            "x": -387.84915,
            "y": 58.7059,
            "value": 17.714287,
            "category": 3
          },
          {
            "id": "35",
            "name": "新疆塔里木油田建设工程...",
            "symbolSize": 11.809524666666666,
            "x": -338.2307,
            "y": 87.48405,
            "value": 17.714287,
            "category": 3
          },
          {
            "id": "36",
            "name": "象山城东加油站有限公司",
            "symbolSize": 11.809524666666666,
            "x": -453.26874,
            "y": 58.94648,
            "value": 17.714287,
            "category": 3
          },
          {
            "id": "37",
            "name": "沈阳中油永安能源发展有...",
            "symbolSize": 11.809524666666666,
            "x": -386.44904,
            "y": 140.05937,
            "value": 17.714287,
            "category": 3
          },
          {
            "id": "38",
            "name": "玉环中环岛北路加油站...",
            "symbolSize": 11.809524666666666,
            "x": -446.7876,
            "y": 123.38005,
            "value": 17.714287,
            "category": 3
          },
          {
            "id": "39",
            "name": "临夏州盛河润泽石油销售...",
            "symbolSize": 6.323809333333333,
            "x": 336.49738,
            "y": -269.55914,
            "value": 9.485714,
            "category": 6
          },
          {
            "id": "40",
            "name": "常山中油振钏加油站有限...",
            "symbolSize": 2.6666666666666665,
            "x": 29.187843,
            "y": -460.13132,
            "value": 4,
            "category": 7
          },
          {
            "id": "41",
            "name": "中山市中油柏山加油站有限...",
            "symbolSize": 20.95238266666667,
            "x": 238.36697,
            "y": -210.00926,
            "value": 31.428574,
            "category": 7
          },
          {
            "id": "42",
            "name": "天津中油红桥石油销售有...",
            "symbolSize": 6.323809333333333,
            "x": 189.69513,
            "y": -346.50662,
            "value": 9.485714,
            "category": 7
          },
          {
            "id": "43",
            "name": "遂宁新顺中油能源发展有...",
            "symbolSize": 6.323809333333333,
            "x": -187.00418,
            "y": -145.02663,
            "value": 9.485714,
            "category": 6
          },
          {
            "id": "44",
            "name": "南京中油三桥成品油销售",
            "symbolSize": 4.495239333333333,
            "x": -252.99521,
            "y": 129.87549,
            "value": 6.742859,
            "category": 4
          },
          {
            "id": "45",
            "name": "常州化诚油品有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -296.07935,
            "y": 163.11964,
            "value": 4,
            "category": 4
          },
          {
            "id": "46",
            "name": "山东通达中油新能源有限公司",
            "symbolSize": 2.6666666666666665,
            "x": 550.3201,
            "y": 522.4031,
            "value": 4,
            "category": 5
          },
          {
            "id": "47",
            "name": "中石化中牟第二十一加油",
            "symbolSize": 4.495239333333333,
            "x": 488.13535,
            "y": 356.8573,
            "value": 6.742859,
            "category": 5
          },
          {
            "id": "48",
            "name": "中石油中牟第二加油站",
            "symbolSize": 41.06667066666667,
            "x": 387.89572,
            "y": 110.462326,
            "value": 61.600006,
            "category": 8
          },
          {
            "id": "49",
            "name": "中石化中牟服务区加油站",
            "symbolSize": 13.638097333333334,
            "x": 126.4831,
            "y": 68.10622,
            "value": 20.457146,
            "category": 6
          },
          {
            "id": "50",
            "name": "中石油河南中牟第十一加",
            "symbolSize": 4.495239333333333,
            "x": 127.07365,
            "y": -113.05923,
            "value": 6.742859,
            "category": 6
          },
          {
            "id": "51",
            "name": "中石化中牟第三加油站",
            "symbolSize": 13.638097333333334,
            "x": 162.63559,
            "y": 117.6565,
            "value": 20.457146,
            "category": 6
          },
          {
            "id": "52",
            "name": "中石化商都大道有限公司",
            "symbolSize": 4.495239333333333,
            "x": 353.66415,
            "y": -205.89165,
            "value": 6.742859,
            "category": 6
          },
          {
            "id": "53",
            "name": "中石油民主街村有限公司",
            "symbolSize": 2.6666666666666665,
            "x": 165.43939,
            "y": 339.7736,
            "value": 4,
            "category": 6
          },
          {
            "id": "54",
            "name": "中石油中牟第四有限公司",
            "symbolSize": 8.152382000000001,
            "x": 137.69348,
            "y": 196.1069,
            "value": 12.228573,
            "category": 6
          },
          {
            "id": "55",
            "name": "道达尔北关加油站",
            "symbolSize": 35.58095333333333,
            "x": 206.44687,
            "y": -13.805411,
            "value": 53.37143,
            "category": 6
          },
          {
            "id": "56",
            "name": "道达尔北沙滩有限公司",
            "symbolSize": 4.495239333333333,
            "x": 194.82993,
            "y": 224.78036,
            "value": 6.742859,
            "category": 6
          },
          {
            "id": "57",
            "name": "道达尔金顶街加油站",
            "symbolSize": 20.95238266666667,
            "x": 597.6618,
            "y": 135.18481,
            "value": 31.428574,
            "category": 8
          },
          {
            "id": "58",
            "name": "中石油云台有限公司",
            "symbolSize": 28.266666666666666,
            "x": 355.78366,
            "y": -74.882454,
            "value": 42.4,
            "category": 8
          },
          {
            "id": "59",
            "name": "道达尔西红门有限公司",
            "symbolSize": 20.95238266666667,
            "x": 515.2961,
            "y": -46.167564,
            "value": 31.428574,
            "category": 8
          },
          {
            "id": "60",
            "name": "道达尔姚家园有限公司",
            "symbolSize": 17.295237333333333,
            "x": 614.29285,
            "y": -69.3104,
            "value": 25.942856,
            "category": 8
          },
          {
            "id": "61",
            "name": "道达尔祁连路有限公司",
            "symbolSize": 20.95238266666667,
            "x": 550.1917,
            "y": -128.17537,
            "value": 31.428574,
            "category": 8
          },
          {
            "id": "62",
            "name": "道达尔马家店镇人民政府南",
            "symbolSize": 24.609526666666667,
            "x": 436.17184,
            "y": -12.7286825,
            "value": 36.91429,
            "category": 8
          },
          {
            "id": "63",
            "name": "中石油振国有限公司",
            "symbolSize": 22.780953333333333,
            "x": 602.55225,
            "y": 16.421427,
            "value": 34.17143,
            "category": 8
          },
          {
            "id": "64",
            "name": "中石油振东有限公司",
            "symbolSize": 24.609526666666667,
            "x": 455.81955,
            "y": -115.45826,
            "value": 36.91429,
            "category": 8
          },
          {
            "id": "65",
            "name": "中石油云杉有限公司",
            "symbolSize": 22.780953333333333,
            "x": 516.40784,
            "y": 47.242233,
            "value": 34.17143,
            "category": 8
          },
          {
            "id": "66",
            "name": "山东路兴石油油气销售有限公司",
            "symbolSize": 19.12381,
            "x": 646.4313,
            "y": -151.06331,
            "value": 28.685715,
            "category": 8
          },
          {
            "id": "67",
            "name": "盘锦科力安石油科技有限公司",
            "symbolSize": 2.6666666666666665,
            "x": 668.9568,
            "y": 204.65488,
            "value": 4,
            "category": 8
          },
          {
            "id": "68",
            "name": "上海金三角加油站有限公司",
            "symbolSize": 19.12381,
            "x": 78.4799,
            "y": -347.15146,
            "value": 28.685715,
            "category": 7
          },
          {
            "id": "69",
            "name": "新疆中油国能油品销售有...",
            "symbolSize": 19.12381,
            "x": 150.35959,
            "y": -298.50797,
            "value": 28.685715,
            "category": 7
          },
          {
            "id": "70",
            "name": "深圳市石化先进加油站有...",
            "symbolSize": 19.12381,
            "x": 137.3717,
            "y": -410.2809,
            "value": 28.685715,
            "category": 7
          },
          {
            "id": "71",
            "name": "厦门福丽工贸有限公司",
            "symbolSize": 17.295237333333333,
            "x": 234.87747,
            "y": -400.85983,
            "value": 25.942856,
            "category": 7
          },
          {
            "id": "72",
            "name": "上海中油爱使华浦加气站..",
            "symbolSize": 6.323809333333333,
            "x": 40.942253,
            "y": 113.78272,
            "value": 9.485714,
            "category": 1
          },
          {
            "id": "73",
            "name": "中石油遂宁天然气净化有...",
            "symbolSize": 4.495239333333333,
            "x": 437.939,
            "y": 291.58234,
            "value": 6.742859,
            "category": 8
          },
          {
            "id": "74",
            "name": "江西中油铁衡有限公司",
            "symbolSize": 4.495239333333333,
            "x": 466.04922,
            "y": 283.3606,
            "value": 6.742859,
            "category": 8
          },
          {
            "id": "75",
            "name": "天津中油红桥石油销售有...",
            "symbolSize": 13.638097333333334,
            "x": 238.79364,
            "y": -314.06345,
            "value": 20.457146,
            "category": 7
          },
          {
            "id": "76",
            "name": "遂宁新顺中油能源发展有...",
            "symbolSize": 13.638097333333334,
            "x": 712.18353,
            "y": 4.8131495,
            "value": 20.457146,
            "category": 8
          }
        ],
        "links": [
          {
            "source": "1",
            "target": "0"
          },
          {
            "source": "2",
            "target": "0"
          },
          {
            "source": "3",
            "target": "0"
          },
          {
            "source": "3",
            "target": "2"
          },
          {
            "source": "4",
            "target": "0"
          },
          {
            "source": "5",
            "target": "0"
          },
          {
            "source": "6",
            "target": "0"
          },
          {
            "source": "7",
            "target": "0"
          },
          {
            "source": "8",
            "target": "0"
          },
          {
            "source": "9",
            "target": "0"
          },
          {
            "source": "11",
            "target": "0"
          },
          {
            "source": "11",
            "target": "2"
          },
          {
            "source": "11",
            "target": "3"
          },
          {
            "source": "11",
            "target": "10"
          },
          {
            "source": "12",
            "target": "11"
          },
          {
            "source": "13",
            "target": "11"
          },
          {
            "source": "14",
            "target": "11"
          },
          {
            "source": "15",
            "target": "11"
          },
          {
            "source": "17",
            "target": "16"
          },
          {
            "source": "18",
            "target": "16"
          },
          {
            "source": "18",
            "target": "17"
          },
          {
            "source": "19",
            "target": "16"
          },
          {
            "source": "19",
            "target": "17"
          },
          {
            "source": "19",
            "target": "18"
          },
          {
            "source": "20",
            "target": "16"
          },
          {
            "source": "20",
            "target": "17"
          },
          {
            "source": "20",
            "target": "18"
          },
          {
            "source": "20",
            "target": "19"
          },
          {
            "source": "21",
            "target": "16"
          },
          {
            "source": "21",
            "target": "17"
          },
          {
            "source": "21",
            "target": "18"
          },
          {
            "source": "21",
            "target": "19"
          },
          {
            "source": "21",
            "target": "20"
          },
          {
            "source": "22",
            "target": "16"
          },
          {
            "source": "22",
            "target": "17"
          },
          {
            "source": "22",
            "target": "18"
          },
          {
            "source": "22",
            "target": "19"
          },
          {
            "source": "22",
            "target": "20"
          },
          {
            "source": "22",
            "target": "21"
          },
          {
            "source": "23",
            "target": "11"
          },
          {
            "source": "23",
            "target": "12"
          },
          {
            "source": "23",
            "target": "16"
          },
          {
            "source": "23",
            "target": "17"
          },
          {
            "source": "23",
            "target": "18"
          },
          {
            "source": "23",
            "target": "19"
          },
          {
            "source": "23",
            "target": "20"
          },
          {
            "source": "23",
            "target": "21"
          },
          {
            "source": "23",
            "target": "22"
          },
          {
            "source": "24",
            "target": "11"
          },
          {
            "source": "24",
            "target": "23"
          },
          {
            "source": "25",
            "target": "11"
          },
          {
            "source": "25",
            "target": "23"
          },
          {
            "source": "25",
            "target": "24"
          },
          {
            "source": "26",
            "target": "11"
          },
          {
            "source": "26",
            "target": "16"
          },
          {
            "source": "26",
            "target": "24"
          },
          {
            "source": "26",
            "target": "25"
          },
          {
            "source": "27",
            "target": "11"
          },
          {
            "source": "27",
            "target": "23"
          },
          {
            "source": "27",
            "target": "24"
          },
          {
            "source": "27",
            "target": "25"
          },
          {
            "source": "27",
            "target": "26"
          },
          {
            "source": "28",
            "target": "11"
          },
          {
            "source": "28",
            "target": "27"
          },
          {
            "source": "29",
            "target": "11"
          },
          {
            "source": "29",
            "target": "23"
          },
          {
            "source": "29",
            "target": "27"
          },
          {
            "source": "30",
            "target": "23"
          },
          {
            "source": "31",
            "target": "11"
          },
          {
            "source": "31",
            "target": "23"
          },
          {
            "source": "31",
            "target": "27"
          },
          {
            "source": "31",
            "target": "30"
          },
          {
            "source": "32",
            "target": "11"
          },
          {
            "source": "33",
            "target": "11"
          },
          {
            "source": "33",
            "target": "27"
          },
          {
            "source": "34",
            "target": "11"
          },
          {
            "source": "34",
            "target": "29"
          },
          {
            "source": "35",
            "target": "11"
          },
          {
            "source": "35",
            "target": "29"
          },
          {
            "source": "35",
            "target": "34"
          },
          {
            "source": "36",
            "target": "11"
          },
          {
            "source": "36",
            "target": "29"
          },
          {
            "source": "36",
            "target": "34"
          },
          {
            "source": "36",
            "target": "35"
          },
          {
            "source": "37",
            "target": "11"
          },
          {
            "source": "37",
            "target": "29"
          },
          {
            "source": "37",
            "target": "34"
          },
          {
            "source": "37",
            "target": "35"
          },
          {
            "source": "37",
            "target": "36"
          },
          {
            "source": "38",
            "target": "11"
          },
          {
            "source": "38",
            "target": "29"
          },
          {
            "source": "38",
            "target": "34"
          },
          {
            "source": "38",
            "target": "35"
          },
          {
            "source": "38",
            "target": "36"
          },
          {
            "source": "38",
            "target": "37"
          },
          {
            "source": "39",
            "target": "25"
          },
          {
            "source": "40",
            "target": "25"
          },
          {
            "source": "41",
            "target": "24"
          },
          {
            "source": "41",
            "target": "25"
          },
          {
            "source": "42",
            "target": "24"
          },
          {
            "source": "42",
            "target": "25"
          },
          {
            "source": "42",
            "target": "41"
          },
          {
            "source": "43",
            "target": "11"
          },
          {
            "source": "43",
            "target": "26"
          },
          {
            "source": "43",
            "target": "27"
          },
          {
            "source": "44",
            "target": "11"
          },
          {
            "source": "44",
            "target": "28"
          },
          {
            "source": "45",
            "target": "28"
          },
          {
            "source": "47",
            "target": "46"
          },
          {
            "source": "48",
            "target": "11"
          },
          {
            "source": "48",
            "target": "25"
          },
          {
            "source": "48",
            "target": "27"
          },
          {
            "source": "48",
            "target": "47"
          },
          {
            "source": "49",
            "target": "11"
          },
          {
            "source": "49",
            "target": "26"
          },
          {
            "source": "50",
            "target": "24"
          },
          {
            "source": "50",
            "target": "49"
          },
          {
            "source": "51",
            "target": "11"
          },
          {
            "source": "51",
            "target": "26"
          },
          {
            "source": "51",
            "target": "49"
          },
          {
            "source": "52",
            "target": "39"
          },
          {
            "source": "52",
            "target": "51"
          },
          {
            "source": "53",
            "target": "51"
          },
          {
            "source": "54",
            "target": "26"
          },
          {
            "source": "54",
            "target": "49"
          },
          {
            "source": "54",
            "target": "51"
          },
          {
            "source": "55",
            "target": "11"
          },
          {
            "source": "55",
            "target": "16"
          },
          {
            "source": "55",
            "target": "25"
          },
          {
            "source": "55",
            "target": "26"
          },
          {
            "source": "55",
            "target": "39"
          },
          {
            "source": "55",
            "target": "41"
          },
          {
            "source": "55",
            "target": "48"
          },
          {
            "source": "55",
            "target": "49"
          },
          {
            "source": "55",
            "target": "51"
          },
          {
            "source": "55",
            "target": "54"
          },
          {
            "source": "56",
            "target": "49"
          },
          {
            "source": "56",
            "target": "55"
          },
          {
            "source": "57",
            "target": "41"
          },
          {
            "source": "57",
            "target": "48"
          },
          {
            "source": "57",
            "target": "55"
          },
          {
            "source": "58",
            "target": "11"
          },
          {
            "source": "58",
            "target": "27"
          },
          {
            "source": "58",
            "target": "48"
          },
          {
            "source": "58",
            "target": "55"
          },
          {
            "source": "58",
            "target": "57"
          },
          {
            "source": "59",
            "target": "48"
          },
          {
            "source": "59",
            "target": "55"
          },
          {
            "source": "59",
            "target": "57"
          },
          {
            "source": "59",
            "target": "58"
          },
          {
            "source": "60",
            "target": "48"
          },
          {
            "source": "60",
            "target": "58"
          },
          {
            "source": "60",
            "target": "59"
          },
          {
            "source": "61",
            "target": "48"
          },
          {
            "source": "61",
            "target": "55"
          },
          {
            "source": "61",
            "target": "57"
          },
          {
            "source": "61",
            "target": "58"
          },
          {
            "source": "61",
            "target": "59"
          },
          {
            "source": "61",
            "target": "60"
          },
          {
            "source": "62",
            "target": "41"
          },
          {
            "source": "62",
            "target": "48"
          },
          {
            "source": "62",
            "target": "55"
          },
          {
            "source": "62",
            "target": "57"
          },
          {
            "source": "62",
            "target": "58"
          },
          {
            "source": "62",
            "target": "59"
          },
          {
            "source": "62",
            "target": "60"
          },
          {
            "source": "62",
            "target": "61"
          },
          {
            "source": "63",
            "target": "48"
          },
          {
            "source": "63",
            "target": "55"
          },
          {
            "source": "63",
            "target": "57"
          },
          {
            "source": "63",
            "target": "58"
          },
          {
            "source": "63",
            "target": "59"
          },
          {
            "source": "63",
            "target": "60"
          },
          {
            "source": "63",
            "target": "61"
          },
          {
            "source": "63",
            "target": "62"
          },
          {
            "source": "64",
            "target": "11"
          },
          {
            "source": "64",
            "target": "48"
          },
          {
            "source": "64",
            "target": "55"
          },
          {
            "source": "64",
            "target": "57"
          },
          {
            "source": "64",
            "target": "58"
          },
          {
            "source": "64",
            "target": "59"
          },
          {
            "source": "64",
            "target": "60"
          },
          {
            "source": "64",
            "target": "61"
          },
          {
            "source": "64",
            "target": "62"
          },
          {
            "source": "64",
            "target": "63"
          },
          {
            "source": "65",
            "target": "48"
          },
          {
            "source": "65",
            "target": "55"
          },
          {
            "source": "65",
            "target": "57"
          },
          {
            "source": "65",
            "target": "58"
          },
          {
            "source": "65",
            "target": "59"
          },
          {
            "source": "65",
            "target": "60"
          },
          {
            "source": "65",
            "target": "61"
          },
          {
            "source": "65",
            "target": "62"
          },
          {
            "source": "65",
            "target": "63"
          },
          {
            "source": "65",
            "target": "64"
          },
          {
            "source": "66",
            "target": "48"
          },
          {
            "source": "66",
            "target": "58"
          },
          {
            "source": "66",
            "target": "59"
          },
          {
            "source": "66",
            "target": "60"
          },
          {
            "source": "66",
            "target": "61"
          },
          {
            "source": "66",
            "target": "62"
          },
          {
            "source": "66",
            "target": "63"
          },
          {
            "source": "66",
            "target": "64"
          },
          {
            "source": "66",
            "target": "65"
          },
          {
            "source": "67",
            "target": "57"
          },
          {
            "source": "68",
            "target": "11"
          },
          {
            "source": "68",
            "target": "24"
          },
          {
            "source": "68",
            "target": "25"
          },
          {
            "source": "68",
            "target": "27"
          },
          {
            "source": "68",
            "target": "41"
          },
          {
            "source": "68",
            "target": "48"
          },
          {
            "source": "69",
            "target": "11"
          },
          {
            "source": "69",
            "target": "24"
          },
          {
            "source": "69",
            "target": "25"
          },
          {
            "source": "69",
            "target": "27"
          },
          {
            "source": "69",
            "target": "41"
          },
          {
            "source": "69",
            "target": "48"
          },
          {
            "source": "69",
            "target": "68"
          },
          {
            "source": "70",
            "target": "11"
          },
          {
            "source": "70",
            "target": "24"
          },
          {
            "source": "70",
            "target": "25"
          },
          {
            "source": "70",
            "target": "27"
          },
          {
            "source": "70",
            "target": "41"
          },
          {
            "source": "70",
            "target": "58"
          },
          {
            "source": "70",
            "target": "68"
          },
          {
            "source": "70",
            "target": "69"
          },
          {
            "source": "71",
            "target": "11"
          },
          {
            "source": "71",
            "target": "25"
          },
          {
            "source": "71",
            "target": "27"
          },
          {
            "source": "71",
            "target": "41"
          },
          {
            "source": "71",
            "target": "48"
          },
          {
            "source": "71",
            "target": "68"
          },
          {
            "source": "71",
            "target": "69"
          },
          {
            "source": "71",
            "target": "70"
          },
          {
            "source": "72",
            "target": "11"
          },
          {
            "source": "72",
            "target": "26"
          },
          {
            "source": "72",
            "target": "27"
          },
          {
            "source": "73",
            "target": "48"
          },
          {
            "source": "74",
            "target": "48"
          },
          {
            "source": "74",
            "target": "73"
          },
          {
            "source": "75",
            "target": "25"
          },
          {
            "source": "75",
            "target": "41"
          },
          {
            "source": "75",
            "target": "48"
          },
          {
            "source": "75",
            "target": "68"
          },
          {
            "source": "75",
            "target": "69"
          },
          {
            "source": "75",
            "target": "70"
          },
          {
            "source": "75",
            "target": "71"
          },
          {
            "source": "76",
            "target": "48"
          },
          {
            "source": "76",
            "target": "58"
          },
          {
            "source": "76",
            "target": "62"
          },
          {
            "source": "76",
            "target": "63"
          },
          {
            "source": "76",
            "target": "64"
          },
          {
            "source": "76",
            "target": "65"
          },
          {
            "source": "76",
            "target": "66"
          }
        ],
        "categories": [
          {
            "name": "A"
          },
          {
            "name": "B"
          },
          {
            "name": "C"
          },
          {
            "name": "D"
          },
          {
            "name": "E"
          },
          {
            "name": "F"
          },
          {
            "name": "G"
          },
          {
            "name": "H"
          },
          {
            "name": "I"
          }
        ]
      }
      myChart.showLoading();
      var chartOption = {
        tooltip: {
          formatter: '{b}'
        },
        grid: {
          x: 10,
          x2: 10,
          y: 35,
          y2: 20,
          containLabel: true,
        },
        color: ['#9A60B4', '#F78452', '#EA7CCC', '#FAC858', '#EE6665', '#5470C6', '#91CC75'],
        series: [
          {
            type: 'graph',
            layout: 'none',
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: false,
            label: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: '#fff'
            },
            labelLayout: {
              hideOverlap: true
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            }
          }
        ]
      };
      myChart.hideLoading();
      myChart.setOption(chartOption, true);
    },
    coverIcon(name) {
      let icon = ''
      switch (name) {
        case '热门专题':
          icon = 'icon-a-lujing1682'
          break
        case '产品价格':
          icon = 'icon-a-lujing1680'
          break
        case '社会民生':
          icon = 'icon-a-lujing1679'
          break
        case '宏观经济':
          icon = 'icon-a-lujing1676'
          break
        case '区域经济':
          icon = 'icon-a-lujing1674'
          break
        case '城市经济':
          icon = 'icon-a-lujing1696'
          break
        case '县域经济':
          icon = 'icon-a-lujing1697'
          break
        case '乡镇经济':
          icon = 'icon-a-lujing1681'
          break
        case '行业经济':
          icon = 'icon-a-lujing1677'
          break
        case '金融数据':
          icon = 'icon-a-lujing1698'
          break
        case '对外贸易':
          icon = 'icon-a-lujing1678'
          break
        case '世界经济':
          icon = 'icon-a-lujing1675'
          break
        case '企业数据':
          icon = 'icon-a-lujing1673'
          break
      }
      return icon
    },
    searchInput(e) {
      var val = e.target.value;
      if (!val) return
    },
    search_button() {
      if (this.searchValue.trim() == '') return
      if (!localStorage.getItem('TOKEN_KEY')) {
        this.loginShow = true
        return
      }
      this.setSearchValue(this.searchValue)
      if (this.$route.name !== 'searchPage') {
        this.$router.push({ name: 'searchPage', query: { source: 'index' } })
        return
      }
      this.$emit('search_button')
    },
    goinit() {
      var ipv6 = "";
      var old_token = localStorage.getItem('TOKEN_KEY')
      if (old_token == null) {
        old_token = "1"
      }
      let self = this;
      $.getJSON("https://v4v6.ipv6-test.com/json/widgetdata.php?callback=?", function (result) {
        if (result.proto == "ipv6") {
          ipv6 = result.address;
        }
        console.log(result)
        self.$axios.request({
          url: "5000/oauth/get/token",
          method: "post",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          params: {
            access_token: old_token,
          }
        }).then(res => {
          let token = res.data.access_token
          if (old_token == null || old_token != token) {
            self.$axios.request({
              url: "5000/authentication/ipfree",
              method: "post",
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'client-id': 'webApp',
                'client-secret': 'webApp',
              },
              params: {
                ipv6: ipv6,
              }
            })
              .then(res => {
                let old_token = localStorage.getItem('TOKEN_KEY')
                let token = res.data.access_token
                if (!old_token || old_token != token) {
                  localStorage.setItem('TOKEN_KEY', token)
                  // 添加登录信息埋点

                  self.$router.push('/index')
                  window.location.reload();
                }
              }).catch((error) => {
                if (error.response.status === 401 && error.response.data.resp_msg === "此账号已过期") {
                  self.$message({
                    message: error.response.data.resp_msg,
                    type: 'error',
                    duration: 3000,
                    onClose: function () {
                      console.log('消息框已关闭');
                    },
                    showClose: true
                  });
                  let old_token = localStorage.getItem('TOKEN_KEY')

                  if (old_token != null) {
                    localStorage.clear()
                    window.location.reload();
                  } else {
                    localStorage.clear()
                    // self.$router.push('/login')
                    // window.location.reload();
                    this.loginShow = true
                  }


                }
              })
          }
        }).catch((error) => {
          self.$axios.request({
            url: "5000/authentication/ipfree",
            method: "post",
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'client-id': 'webApp',
              'client-secret': 'webApp',
            },
            params: {
              ipv6: ipv6,
            }
          }).then(res => {
            let old_token = localStorage.getItem('TOKEN_KEY')
            let token = res.data.access_token
            if (!old_token || old_token != token) {
              localStorage.setItem('TOKEN_KEY', token)

              self.$router.push('/index')
              window.location.reload();
            }
          }).catch((error) => {
            if (error.response.status === 401 && error.response.data.resp_msg === "此账号已过期") {
              self.$message({
                message: error.response.data.resp_msg,
                type: 'error',
                duration: 3000,
                onClose: function () {
                  console.log('消息框已关闭');
                },
                showClose: true
              });
              let old_token = localStorage.getItem('TOKEN_KEY')
              if (old_token != null) {
                localStorage.clear()
                window.location.reload();
              }
            }
          })
        })
      });
    },


    // 路由跳转
    gomenus(item) {
      let old_token = localStorage.getItem('TOKEN_KEY')
      if (old_token != null) {
        let breadcrumb = []
        let headTag = []
        if (item.status == 3) {
          breadcrumb.push("分省月度数据")
          breadcrumb.push("分省���度数据")
          headTag.push(item.name)
          this.setHeadTag(headTag)
        } else {
          let params = item.category.split(",")
          console.log("home" + params)
          let category = params[0]
          let name = params[1]
          breadcrumb.push(category)
          breadcrumb.push(name)
          headTag.push(item.componentName)
          this.setHeadTag(headTag)
        }
        this.setBreadcrumb(breadcrumb)
        if (item.route || item.status == 3) {
          let path1 = ""
          if (import.meta.env.DEV) {
            path1 = "http://" + item.description + ":3000/#/" + item.url + "?" + "tablename=" + item.tableName + "&token=" + old_token + "&menuType=" + item.icon + "&status=" + item.status + "&breadcrumb=" + breadcrumb + "&headTag=" + headTag + "&ruleFlag=" + item.ruleFlag + "&id=" + item.gparentId
          } else {
            path1 = "http://" + item.description + "/#/" + item.url + "?" + "tablename=" + item.tableName + "&token=" + old_token + "&menuType=" + item.icon + "&status=" + item.status + "&breadcrumb=" + breadcrumb + "&headTag=" + headTag + "&ruleFlag=" + item.ruleFlag + "&id=" + item.gparentId
          }
          window.location.replace(path1);
        }
        // this.$router.push({ path: path1 })
      } else if (this.islogin && !item.route) {
        return
      } else {
        localStorage.clear()
        // this.$router.push('/login')
        // window.location.reload();
        this.loginShow = true
      }
    },

    changeNav(model) {
      console.log(model)
      model = "mod" + model;
      VueScrollTo.scrollTo(document.getElementById(model), 1000, {
        offset: -50
      })
    },

    // 获取菜单
    getMenu() {
      let userInfo = this.getUserInfo
      let self = this
      this.$axios.request({
        url: "5700/websingletable/getShopItems",
        method: "get",
        params: {
          userId: userInfo.id
        },
      }).then(function (response) {
        self.menuDatas = response.data
        console.log(self.menuDatas)
        //把self.menuDatas下所有的route设置为true
        for (let i = 0; i < self.menuDatas.length; i++) {
          self.menuDatas[i].route = true
        }
        console.log(self.menuDatas)
        //self.menuDatas每一项中的children下，如果所有的route都为false，则把父级的route设置为false
        for (let i = 0; i < self.menuDatas.length; i++) {
          if (self.menuDatas[i].children) {
            let route = false
            for (let j = 0; j < self.menuDatas[i].children.length; j++) {
              if (self.menuDatas[i].children[j].route) {
                route = true
              }
            }
            self.menuDatas[i].route = route
          }
        }
        console.log(self.menuDatas)
        /**
         * response.data根据name分为3组
         * 第一组：热门专题、社会民生、宏观经济、行业经济、城市数据
         * 第二组：产品价格、区域经济
         * 第三组：企业数据、金融数据、对外贸易、世界经济、县域经济、乡镇经济
         */
        let containerList1 = []
        let containerList2 = []
        let containerList3 = []

        const group1Order = ['热门专题', '社会民生', '宏观经济', '行业经济', '城市经济']
        const group2Order = ['产品价格', '区域经济']
        const group3Order = ['企业数据', '金融数据', '对外贸易', '世界经济', '县域经济', '乡镇经济']

        for (let i = 0; i < self.menuDatas.length; i++) {
          if (group1Order.includes(self.menuDatas[i].name)) {
            containerList1.push(self.menuDatas[i])
          } else if (group2Order.includes(self.menuDatas[i].name)) {
            containerList2.push(self.menuDatas[i])
          } else if (group3Order.includes(self.menuDatas[i].name)) {
            containerList3.push(self.menuDatas[i])
          }
        }

        containerList1.sort((a, b) => group1Order.indexOf(a.name) - group1Order.indexOf(b.name))
        containerList2.sort((a, b) => group2Order.indexOf(a.name) - group2Order.indexOf(b.name))
        containerList3.sort((a, b) => group3Order.indexOf(a.name) - group3Order.indexOf(b.name))

        self.newContainerList = [containerList1, containerList2, containerList3]
        // for (let i = 0; i < self.menuDatas.length; i++) {
        //   if (self.menuDatas[i].name === '热门专题' || self.menuDatas[i].name === '社会民生' || self.menuDatas[i].name === '宏观经济' || self.menuDatas[i].name === '行业经济' || self.menuDatas[i].name === '城市数据') {
        //     containerList1.push(self.menuDatas[i])
        //   } else if (self.menuDatas[i].name === '产品价格' || self.menuDatas[i].name === '区域经济') {
        //     containerList2.push(self.menuDatas[i])
        //   } else if (self.menuDatas[i].name === '企业数据' || self.menuDatas[i].name === '金融数据' || self.menuDatas[i].name === '对外贸易' || self.menuDatas[i].name === '世界经济' || self.menuDatas[i].name === '县域经济' || self.menuDatas[i].name === '乡镇经济') {
        //     containerList3.push(self.menuDatas[i])
        //   }
        // }
        // self.newContainerList = [containerList1, containerList2, containerList3]
        console.log(self.newContainerList)
      }).catch(function (error) {
        console.error(error)
      });
    },

    // 获取菜单
    getRegionMenu() {
      let userInfo = this.getUserInfo
      let self = this
      this.$axios.request({
        url: "5700/websingletable/getShopRegionItems",
        method: "get",
        params: {
          userId: userInfo.id
        },
      }).then(function (response) {
        self.menuRegionDatas = response.data
      }).catch(function (error) {
        console.error(error)
      });
    },

    // 数据格式化
    formatNotice(data) {
      const formattedData = []
      for (const key in data) {
        const item = data[key]
        const formattedItem = {}
        formattedItem.name = key
        for (const subKey in item) {
          const value = item[subKey]
          if (value.includes('%')) {
            if (value.includes('-')) {
              formattedItem.isNegative = true
            } else {
              formattedItem.isNegative = false
            }
            formattedItem.value = value;
          } else {
            formattedItem.amount = value
          }
        }
        formattedData.push(formattedItem)
      }
      return formattedData
    }
  }
}
</script>

<style lang="less">
// background: url('../assets/image/home/bg.png') 100% 100%;
header {
  background-color: #1c1c1c;
  height: 140px;
  margin-top: 2px;

  .Nav {
    text-align: left;

    img {
      width: 203px;
      margin: 42px 0 0 164px;
      display: inline;
    }

    ul {
      position: relative;
      display: inline;
      top: -20px;

      li {
        display: inline;

        span {
          display: inline;
          margin: 50px 0 0 58px;
          font-family: SourceHanSansCN-Regular;
          font-size: 18px;
          height: 18px;
          overflow-wrap: break-word;
          color: #4b97de;
          cursor: pointer;
        }

        span:hover {
          color: #f3ab02;
        }
      }
    }

  }
}

.search_tag {
  padding-left: 10px;
  display: inline-block;
}

.home {
  position: relative;
  width: 100%;
  height: 15062px;
  background: url(/img/psxg6wf1f1w8p4yylou5w0zigd20sasyad215703e1-9e42-4723-b1d7-3aeb50761e94.71cb8ca8.png) 100% no-repeat;
  background-size: 100% 100%;
}

.title_image_2 {
  transform: rotate(180deg);
  padding: 20px;
}

.title_image_3 {
  padding: 20px;
}

.image_25 {
  width: 1920px;
  height: 504px;
  margin: 4584px 0 1px 0;
}

.sub_title div span,
.sub_title span,
.tag_div_class_1 div span,
.tag_div_class div span {
  cursor: pointer;
}

// .sub_title div span:hover, .sub_title span:hover, .tag_div_class_1 div span:hover,.tag_div_class div span:hover{
//   color:#f3ab02;
// }
.sub_title {
  div {
    span:hover {
      color: #f3ab02;
    }
  }

  span:hover {
    color: #f3ab02;
  }
}

.kno_box1 {
  height: auto;
  width: 1600px;
  display: grid;
  grid-template-columns: repeat(1, 24fr);
  grid-template-rows: 1fr;
  grid-column-gap: 27px;
  margin: 0px auto 42px;

  .kno {
    .title {
      width: 220px;
      height: 44px;
      padding-bottom: 10px;
      padding-top: 40px;
      font-size: 28px;
      color: white
    }

    .image_1 {
      position: absolute;
      right: 0;
      top: -23px;
      width: 714px;
      height: 905px;
      z-index: -1;
    }

    .sub_mod1 {
      background-color: #1b1c24;
      padding-top: 10px;
      top: 30px;
      position: relative;
      width: 85vw;

      div {
        text-align: left;
      }

      .sub_title {
        overflow-wrap: break-word;
        color: #ffffff;
        font-size: 24px;
        font-family: SourceHanSansCN-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        margin: 1px 0 0 22px;
        display: flex;
        width: 419px;
        height: 28px;
        margin-top: 40px;

        span:hover {
          color: #f3ab02;
        }

        span {
          width: 167px;
          height: 24px;
          overflow-wrap: break-word;
          color: #ffffff;
          font-size: 24px;
          font-family: SourceHanSansCN-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          margin: 1px 0 0 22px;

          p {
            width: 167px;
            height: 24px;
            overflow-wrap: break-word;
            color: #4358d4;
            font-size: 19px;
            font-family: SourceHanSansCN-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            margin: 1px 0 0 22px;
            display: inline;
          }
        }

        img {
          display: flex;
        }
      }

      .image_dashed_line {
        height: 1px;
        // margin: 30px 0 0 36px;
        display: flex;
        flex-direction: row;

        img {
          width: 85vw;
        }
      }

      .tag_div_class {
        display: inline-block;
        // height: 38px;
        margin: 16px 0 0 37px;

        div {
          height: 38px;
          background: rgba(67, 88, 212, 0.37);
          border-radius: 2px;
          border: 1px solid #4358D4;
          display: inline-block;
          margin: 0 0 12px 12px;

          span {
            display: flex;
            height: 15px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #4358d4;
            line-height: 72px;
            display: flex;
            margin: -15px 10px 10px 10px;
          }
        }
      }
    }

    .sub_mod2 {
      background-color: #1b1c24;
      padding-top: 10px;
      top: 30px;
      position: relative;
      width: 85vw;

      div {
        text-align: left;
      }

      .sub_title {
        overflow-wrap: break-word;
        color: #ffffff;
        font-size: 24px;
        font-family: SourceHanSansCN-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        margin: 1px 0 0 22px;
        display: flex;
        width: 419px;
        height: 28px;
        margin-top: 40px;

        div {
          width: 167px;
          height: 24px;
          overflow-wrap: break-word;
          color: #ffffff;
          font-size: 24px;
          font-family: SourceHanSansCN-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          margin: 1px 0 0 22px;

          span {
            font-size: 23px;

            p {
              width: 167px;
              height: 24px;
              overflow-wrap: break-word;
              color: #40b3c2;
              font-size: 19px;
              font-family: SourceHanSansCN-Medium;
              font-weight: 500;
              text-align: left;
              white-space: nowrap;
              margin: 1px 0 0 22px;
              display: inline;
            }
          }
        }

        img {
          display: flex;
        }
      }

      .image_dashed_line {
        height: 1px;
        margin: 30px 0 0 36px;
        display: flex;
        flex-direction: row;

        img {
          width: 85vw;
        }
      }

      .tag_div_class_1 {
        display: inline-block;
        height: 38px;
        margin: 16px 0 0 37px;

        div {
          background-color: rgba(64, 179, 194, 0.2405);
          border-radius: 2px;
          height: 38px;
          border: 1px solid rgba(64, 179, 194, 0.65);
          ;
          display: inline-block;
          // margin-left: 12px;
          margin: 0 0 12px 12px;

          span {
            display: flex;
            height: 15px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #40b3c2;
            line-height: 72px;
            display: flex;
            margin: -15px 10px 10px 10px;
          }
        }
      }
    }
  }
}



.thumbnail {
  width: 9px;
  height: 16px;
  margin-top: 6px;
}

.titleOne {
  padding: 60px 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;

  img:nth-child(1),
  img:nth-child(3) {
    height: 13px;
  }

  img:nth-child(2) {
    height: 30px;
    margin: 0 9px;
  }
}

.titleTow {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  img:nth-child(1) {
    height: 30px;
    margin-right: 9px;
  }

  img:nth-child(2) {
    height: 13px;
  }
}

.link {
  display: flex;
  flex-wrap: wrap;

  // justify-content: center;
  li {
    margin-right: 11px;
    margin-bottom: 10px;
    border: 1px solid #008fe9;
    border-radius: 3px;
    background: rgba(0, 143, 233, 0.47);
    padding: 2px 20px;
    cursor: pointer;

    span {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #4393ff;
    }
  }
}

.link_l {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;

  li {
    padding: 2px 20px;
    margin-right: 11px;
    margin-bottom: 12px;
    background: rgba(86, 115, 199, 0.47);
    border: 1px solid #5673c7;
    border-radius: 3px;
    cursor: pointer;

    span {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #6089ff;
    }
  }
}

.link_p {
  display: flex;
  flex-wrap: wrap;

  li {
    width: 130px;
    margin-right: 11px;
    margin-bottom: 10px;
    background: rgba(47, 163, 174, 0.47);
    border: 1px solid #2fa3ae;
    opacity: 0.45;
    border-radius: 3px;
    padding: 2px 20px;
    cursor: pointer;

    span {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #6ed2db;
    }
  }
}

.worldTitle {
  text-align: left;
  font-size: 20px;
  color: #ffffff;
  font-family: "Source Han Sans CN";
}

.w100 {
  width: 100px;
}

.w150 {
  width: 150px;
}

footer {
  background-color: #1c1c1c;
  height: 62px;

  p {
    color: #9eabd1;
    line-height: 62px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
  }
}

.newHome {
  height: auto;
  background: #1D1819;

  .advertising {
    height: 40px;
    padding: 0 180px;
    line-height: 40px;
    color: #fff;

    .warp {
      min-width: 1024px;
      height: 45px;
      // margin: 0 auto;
      overflow: hidden;

      ul {
        font-size: 14px;
        color: #ffffff;
        font-weight: 400;
        line-height: 48px;
        display: flex;

        li {
          display: flex;

          .ratio i {
            margin-right: 3px;
          }

          .ratio.red {
            color: red;
          }

          .ratio.green {
            color: green;
          }

          span {
            margin-right: 10px;
          }
        }
      }
    }
  }

  .newHeader {
    height: 64px;
    padding: 18px 180px 22px;
    display: flex;
    align-items: center;

    .logo {
      width: 160px;
    }

    .searchBox {
      width: 384px;
      height: 32px;
      background: #948482;
      display: flex;
      margin-left: 278px;
      margin-right: 26px;
      border-radius: 4px;

      input {
        height: 100%;
        flex: 1;
        border: none;
        background: none;
        font-size: 18px;
      }

      img {
        display: block;
        width: 32px;
      }

      .icon {
        display: block;
        color: #D82B2C;
        font-size: 40px;
      }
    }

    .icon-a-zu92 {
      font-size: 32px;
      color: #D82B2C;
      cursor: pointer;
    }

    .language {
      font-size: 17px;
      line-height: 1;
      color: #948482;
      margin-right: 77px;
      cursor: pointer;
      margin-left: auto;

      .line {
        margin: 0 14px;
      }
    }

    .icon-a-lujing1318 {
      font-size: 32px;
      color: #D82B2C;
      cursor: pointer;
    }
  }

  .menuBg {
    height: 60px;
    background: #948482;

    .menuCont {
      padding: 0 180px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;

      .menuItem {
        cursor: pointer;
        border-right: 1px solid #7B6D6C;
        flex: 1;

        .icon {
          font-size: 26px;
          display: block;
        }

        .name {
          font-size: 13px;
          display: block;
          margin-top: 6px;
          font-weight: 600;
        }
      }

      .menuItem:last-child {
        border-right: none;
      }

      .menuItem:hover {
        .icon {
          //color渐变，从上到下为#C80011到#270003
          background: linear-gradient(180deg,#270003 0%, #C80011 100%);
          -webkit-background-clip: text;
          // color: transparent;
          -webkit-text-fill-color: transparent;
        }

        .name {
          // color: #D82B2C;
        }
      }
    }
  }

  .newContainer {
    padding: 0 180px;
    display: flex;

    .left {
      width: 31%;
      max-width: 480px;
      margin-right: 16px;
      margin-top: 22px;
      // background: rgba(148, 132, 130, 0.5);
      box-sizing: border-box;

      .swiper-container {
        width: 100%;
        height: 300px;
        margin-bottom: 16px;
        background: rgba(38, 39, 45, 0.5);
      }

      .swiper-container:last-child {
        margin-bottom: 0;
      }

      .swiper-slide {
        height: 300px;
        position: relative;

        .title {
          color: #fff;
          position: absolute;
          z-index: 10;
          left: 10px;
          top: 10px;
          font-size: 14px;
        }

        .chart {
          width: 100%;
          height: 100%;
          //rgba:#948482
          background: none;
          box-sizing: border-box;
          padding: 20px 60px;
        }

        .qubg {
          position: absolute;
          left: 26%;
          top: 13%;
          width: 49%;
          height: 69%;
        }

        .AnnularData {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          display: flex;
          justify-content: center;

          .annularItem {
            margin: 0 4px;
            color: #ffffff;
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            line-height: 24px;
            flex: 1;
            height: 24px;
            border-radius: 4px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: distribute;
            justify-content: space-around;

            .name {
              display: flex;
              align-items: center;
            }

            i {
              width: 4px;
              height: 4px;
              border-radius: 50%;
              display: block;
              margin-right: 3px;
            }
          }

          .annularItem:nth-child(1) {
            border: 1px solid rgb(120, 195, 160);
            background: rgba(120, 195, 160, 0.36);

            i {
              border: 2px solid rgb(120, 195, 160);
            }
          }

          .annularItem:nth-child(2) {
            border: 1px solid rgb(247, 213, 50);
            background: rgba(247, 212, 50, 0.36);

            i {
              border: 2px solid rgb(247, 213, 50);
            }
          }

          .annularItem:nth-child(3) {
            border: 1px solid rgb(59, 178, 236);
            background: rgba(59, 178, 236, 0.36);

            i {
              border: 2px solid rgb(59, 178, 236);
            }
          }

          .annularItem:nth-child(4) {
            border: 1px solid rgb(255, 137, 89);
            background: rgba(255, 137, 89, 0.36);

            i {
              border: 2px solid rgb(255, 137, 89);
            }
          }
        }
      }

      .swiper-container:nth-child(2) {
        .swiper-slide:first-child {
          .chart {
            padding-top: 40px;
          }
        }
      }

      .swiper-container:nth-child(1) {
        .swiper-slide:last-child {
          .chart {
            padding-top: 40px;
          }
        }
      }

      // .swiper-slide:nth-child(3),.swiper-slide:nth-child(4){

      //   .chart{
      //     background: none;
      //     border: 2px solid #948482;
      //   }
      // }
    }

    .right {
      flex: 1;
      display: flex;

      .rightCont {
        flex: 1;
        margin-right: 16px;

        .rightItems {
          margin-top: 10px;

          .titleBox {
            height: 42px;
            background: #948482;
            display: flex;
            padding-right: 16px;
            color: #1D1819;
            align-items: center;
            margin-bottom: 10px;

            .icon {
              font-size: 22px;
              margin: 0 24px;
            }

            .title {
              font-size: 18px;
              height: 30px;
              line-height: 30px;
              border-left: 1px solid #7B6D6C;
              display: block;
              padding-left: 24px;
              font-weight: bold;
            }

            .icon-menu {
              font-size: 20px;
              margin-left: auto;
              margin-right: 0;
            }
          }

          .titleBox.disable {
            cursor: not-allowed;
            color: #7B6D6C;
          }

          .itemsCont {
            margin-bottom: 4px;
            padding: 0 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 22px;
            cursor: pointer;

            .name {
              font-size: 14px;
            }

            .icon {
              font-size: 14px;
            }

            .hotIcon {
              font-size: 12px;
              font-weight: bold;
            }
          }

          .itemsCont:hover {
            background: #D82B2C;
          }

          .disable {
            cursor: not-allowed;
            color: #948482;
          }
        }

        .rightItems:first-child {
          margin-top: 22px;
        }
      }

      .rightCont:first-child {
        .rightItems {
          margin-top: 6px;

          .titleBox {
            margin-bottom: 3px;
          }
        }

        .rightItems:first-child {
          margin-top: 22px;

          .titleBox {
            margin-bottom: 10px;
          }
        }
      }

      .rightCont:last-child {
        margin-right: 0;

        .rightItems {
          margin-top: 10px;

          .titleBox {
            margin-bottom: 10px;
          }
        }

        .rightItems:first-child {
          margin-top: 22px;

          .titleBox {
            margin-bottom: 10px;
          }
        }
      }
    }
  }

  .newFooter {
    display: flex;
    color: #948482;
    padding: 10px 0;
    margin: 12px auto 0;
    align-items: center;
    border-top: 1px solid #948482;
    border-bottom: 1px solid #948482;

    .logo {
      width: 140px;
      height: 44px;
      margin-left: auto;
    }

    .newFooterCont {
      display: flex;
      align-items: center;

      .title {
        font-size: 18px;
        margin-right: 30px;
        margin-left: 60px;
        width: 110px;
      }

      .cont {
        padding-right: 90px;
        border-right: 1px solid #7B6D6C;
        // min-height: 83px;
        flex: 1;

        .item {
          margin-bottom: 10px;
          font-size: 12px;
        }

        .itemSpan {
          em {
            margin: 0 14px;
            color: #D82B2C;
          }
        }

        .itemSpan:last-child,
        .itemSpan:nth-child(5),
        .itemSpan:nth-child(10) {
          em {
            display: none;
          }
        }

        //最后3个item,margin-botton为0
        .item:last-child,
        .item:nth-child(5),
        .item:nth-child(6),
        .item:nth-child(7),
        .item:nth-child(8),
        .item:nth-child(9),
        .item:nth-child(10)    {
          margin-bottom: 0;
        }
      }

      .contSpan {
        display: flex;
        flex-wrap: wrap;

        .itemSpan {
          display: block;
          font-size: 12px;
        }
      }
    }

    .newFooterCenter {
      width: 900px;
    }

    .newFooterCont:last-child {
      .cont {
        border-right: none;
      }
    }

    .newFooterCont:first-child {
      .title {
        margin-left: 0;
      }
    }
  }
}
</style>

<style>
/* // 兼容笔记本 */
@media screen and (max-width: 1441px) {}

/* 兼容手机屏幕 */
@media screen and (max-width: 769px) {
  .home {
    overflow: hidden;
  }

  header .notice_box .warp {
    min-width: 100%;
  }

  header .fixtop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    z-index: 9999;
    height: 60px;
  }

  header .fixtop .logo {
    width: 145px;
    height: 40px;
    background: url('@/assets/image/home/logo.png') no-repeat center;
    background-size: 100%;
    margin-left: 5%;
  }

  header .fixtop .phonemenu {
    position: fixed;
    z-index: 9999;
  }

  header .fixtop .phonemenu .nav__trigger {
    display: block;
    position: fixed;
    width: 23px;
    height: 23px;
    right: 8%;
    margin-right: 0;
    top: 60px;
    z-index: 99997;
    font-size: 12px;
  }

  header .fixtop .phonemenu .nav {
    position: fixed;
    z-index: 99996;
    right: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    opacity: 0;
  }

  header .fixtop .phonemenu .nav--active {
    top: 0;
    opacity: 1;
  }

  header .fixtop .phonemenu .nav__icon {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 2px;
    background-color: #9e9f9f;
    -webkit-transition-property: background-color, -webkit-transform;
    transition-property: background-color, -webkit-transform;
    transition-property: background-color, transform;
    transition-property: background-color, transform, -webkit-transform;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    top: -2px;
  }

  header .fixtop .phonemenu .nav__icon:before,
  .nav__icon:after {
    content: '';
    display: block;
    width: 23px;
    height: 2px;
    position: absolute;
    background: #9e9f9f;
    -webkit-transition-property: margin, -webkit-transform;
    transition-property: margin, -webkit-transform;
    transition-property: margin, transform;
    transition-property: margin, transform, -webkit-transform;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
  }

  header .fixtop .phonemenu .nav__icon:before {
    margin-top: -8px;
  }

  header .fixtop .phonemenu .nav__icon:after {
    margin-top: 8px;
  }

  header .fixtop .phonemenu .nav--active .nav__trigger {
    opacity: 1;
  }

  header .fixtop .phonemenu .nav--active .nav__icon:before {
    margin-top: 0;
    transform: rotate(45deg);
    background: #fff;
  }

  header .fixtop .phonemenu .nav--active .nav__icon:after {
    margin-top: 0;
    transform: rotate(-45deg);
    background: #fff;
  }

  header .fixtop .phonemenu .nav--active .nav__icon {
    background: rgba(0, 0, 0, 0);
  }

  header .fixtop .phonemenu .phone_nav {
    position: fixed;
    z-index: 99996;
    right: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    opacity: 0;
  }

  header .fixtop .phonemenu .phone_nav .table {
    display: table;
    height: 100%;
    width: 100%;
  }

  header .fixtop .phonemenu .phone_nav .table .td {
    display: table-cell;
    vertical-align: middle;
  }

  header .fixtop .phonemenu .phone_nav li {
    margin: 10px 0;
    text-align: center;
    line-height: 40px;
  }

  header .fixtop .phonemenu .phone_nav li span {
    font-size: 18px;
    padding: 0;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
  }

  header .fixtop .phonemenu .nav--active .phone_nav {
    top: 0;
    opacity: 1;
  }

  .Nav {
    display: none;
  }

  .mod1 {
    width: 100%;
  }

  .mod1 .company {
    margin-bottom: 10px;
  }

  .mod1 .company .titleOne {
    padding: 15px 0 10px;
  }

  .mod1 .company div:nth-child(2) {
    flex-direction: column;
  }

  .mod1 .company .annular {
    width: 100%;
    margin-right: 0px;
  }

  .mod1 .company .annular #Annular {
    width: 100%;
    height: 217px;
  }

  .mod1 .company .annular .legend {
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .mod1 .company .annular .legend li {
    margin-bottom: 10px;
  }

  .mod1 .company #relation {
    width: 100%;
    height: 284px;
  }

  .link_l {
    margin-bottom: 20px;
  }

  .link_l li {
    width: 115px;
  }

  .mod1 .company div:nth-child(4) {
    flex-direction: column;
  }

  .mod1 .heat {
    margin-right: 0px;
  }

  .titleOne {
    padding: 20px 0 10px;
  }

  .titleTow {
    justify-content: center;
  }

  .titleTow img:nth-child(2) {
    display: none;
  }

  .worldTitle {
    font-size: 14px;
  }

  .titlwThree {
    font-size: 12px;
  }

  .link {
    justify-content: center;
    margin-top: 15px !important;
  }

  .link li {
    width: 100px;
  }

  .link_p {
    justify-content: center;
  }

  .link_p li {
    width: 100px;
  }

  .link li span {
    font-size: 10px;
  }

  .mod1 .heat #heat {
    width: 100%;
    height: 236px;
  }

  .mod1 .macro .macro_cneter .ma_r .qubg {
    width: 247px;
    height: 247px;
    left: 50%;
    margin-left: -123px;
    top: 13%;
  }

  .mod1 .macro {
    width: 90vw;
    margin: 20px auto;
  }

  .mod1 .macro .macro_cneter {
    display: flex;
    flex-direction: column;
  }

  .mod2 {
    margin-top: 20px;
  }

  .mod2 .region {
    width: 90vw;
    height: auto;
  }

  .mod2 .region .region_box {
    display: flex;
    flex-direction: column;
  }

  .mod2 .region .region_box #nation {
    height: 291px;
  }

  .mod2 .region .region_box #province {
    height: 291px;
  }

  .mod2 .region .region_box #county {
    width: 100%;
    height: 291px;
  }

  .mod3 .industry {
    width: 90vw;
  }

  .mod3 .industry .industry_center {
    display: flex;
    flex-direction: column;
  }

  .mod3 .industry .industry_center .industry_re #finance {
    height: 302px;
  }

  .mod3 .industry .industry_center .industry_le #yield {
    height: 332px;
  }

  .mod4 .exports {
    width: 90vw;
    padding-bottom: 15px;
  }

  .mod4 .exports .exports_box {
    display: flex;
    flex-direction: column;
  }

  .mod4 .exports .exports_box .exports_rg .seamless-warp .code {
    font-size: 12px;
  }

  .mod4 .exports .exports_box .exports_rg .seamless-warp .name {
    font-size: 12px;
  }

  .mod5 .PriceIndustry {
    width: 90vw;
    display: flex;
    flex-direction: column;
    padding: 30px 0 20px;
  }

  .mod5 .PriceIndustry .price #price {
    margin-bottom: 10px;
  }

  .mod5 .PriceIndustry .industry {
    margin-top: 20px;
  }

  .mod6 {
    height: auto;
  }

  .mod6 .Subject {
    width: 90vw;
  }

  .mod6 .Subject .Subject_box {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px
  }

  .mod7 .kno_box {
    display: flex;
    flex-direction: column;
    margin: 0px auto 22px
  }

  .mod7 .kno_box .kno {
    padding: 10px 15px;
    margin-bottom: 20px;
    width: 85%;
    margin: auto;
  }

  .mod7 .kno_box .kno ul {
    flex-direction: column;
    line-height: 25px;
    font-size: 11px;
  }

  .mod7 .kno_box .kno .title {
    font-size: 20px;
  }

  .footer {
    flex-direction: column;
    height: auto !important;
    line-height: 25px !important;
  }

  /* .footer span { padding-left: 40px;} */
}
</style>
